<%--
  Created by IntelliJ IDEA.
  User: A
  Date: 2024/4/29
  Time: 16:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page isELIgnored="false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css">
    <script src="../../static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../static/mylayer.js" type="text/javascript" charset="utf-8"></script>
    <style>
        css
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%; /* 确保页面宽度占满整个视口 */
            height: 100%; /* 确保页面高度占满整个视口 */
            background: url(../../static/pic/bt.jpg) no-repeat center;
            background-size: cover; /* 让背景照片铺满整个页面 */
        }
        body {
            padding-top: 100px;
        }
        .layui-form{
            width: 400px;
        }
        .layui-card {
            position: absolute; /* 使用绝对定位 */
            top: calc(50% + 50px); /* 将容器顶部位置设置为页面垂直中心 */
            left: 50%; /* 将容器左侧位置设置为页面水平中心 */
            transform: translate(-50%, -50%); /* 使用transform属性向左和向上移动容器的50%宽度和高度，以实现完全居中 */
            padding: 20px; /* 根据需要调整内边距 */
            background-color: rgba(255, 255, 255, 0.8); /* 设置背景颜色，并可根据需要调整透明度 */
            border-radius: 5px; /* 添加圆角 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
        }
        .button-container {
            display: flex;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="layui-card">
        <div class="layui-card-header button-container" style="font-size: 20px; color: #333; text-align: center;">个人信息</div><br><br>
        <form class="layui-form" lay-filter="updateFormFilter" action="">
            <div class="layui-form-item">
                <input type="hidden" name="id" id="${admin.id}">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline layui-input-wrap">
                    <input type="text" name="username" lay-verify="required" disabled placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-inline layui-input-wrap">
                    <input type="text" name="account" lay-verify="required" disabled placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
<%--            <div class="layui-form-item">--%>
<%--                <label class="layui-form-label">密码</label>--%>
<%--                <div class="layui-input-inline layui-input-wrap">--%>
<%--                    <input type="text" name="password" lay-verify="required" disabled placeholder="请输入" autocomplete="off" class="layui-input">--%>
<%--                </div>--%>
<%--            </div>--%>
            <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-inline layui-input-wrap">
                    <div style="width: 132px;">
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" width="189px" height="189px" class="layui-upload-img" id="demo1">
                            <div id="demoText"></div>
                            <input type="hidden" name="avatar" id="imageId">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block" >
                    <input type="radio" name="gender" value="男" title="男" checked>
                    <input type="radio" name="gender" value="女" title="女">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-inline layui-input-wrap">
                    <input type="text" name="age" lay-verify="required" placeholder="请输入" disabled autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" name="email" lay-verify="email" disabled placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="button-container">
                    <button type="button" class="layui-btn layui-bg-blue" lay-submit lay-filter="submitUpdateInfo">修改个人信息</button>
                    <button type="button" class="layui-btn layui-bg-orange" lay-submit lay-filter="submitUpdateAP">修改账号密码</button>
                </div>
            </div>
        </form>
    </div>
    <script>
        layui.use(['form'], function(){
            var form = layui.form;

            var id = ${admin.id};
            $.post(
                '/admin?method=selectByInfoId',
                {'id': id},
                function (result) {
                    if (result.code == 0) {
                        form.render('select');
                        form.val('updateFormFilter', result.data);
                        $('#demo1').attr('src', '/pic/' + result.data.avatar);
                        // 获取性别数据
                        var gender = result.data.gender;

                        // 根据性别设定对应的单选框
                        if (gender === '男') {
                            $('input[name="gender"][value="男"]').prop('checked', true);
                            $('input[name="gender"][value="女"]').prop('disabled', true);
                        } else if (gender === '女') {
                            $('input[name="gender"][value="女"]').prop('checked', true);
                            $('input[name="gender"][value="男"]').prop('disabled', true);
                        }
                    }
                },
                'json'
            );

            form.on('submit(submitUpdateInfo)', function (data) {
                var field = data.field;
                console.log(field);
                layer.open({
                    title: '修改个人信息',
                    type: 2,
                    area: ['35%', '90%'],// 宽高
                    content: '/page/admininfo/updateinfo?id='+field.id,
                });
            })

            form.on('submit(submitUpdateAP)', function (data) {
                var field = data.field;
                console.log(field);
                layer.open({
                    title: '修改密码',
                    type: 2,
                    area: ['35%', '70%'],// 宽高
                    content: '/page/admininfo/updatepassword?id='+field.id,
                });
            })
        });
    </script>
</body>
</html>
